<style>
    body {
        background: var(--background);
        min-height: 100vh;
        margin: 0;
        padding: 1rem;
    }

    :root {
        --primary-color: #4a90e2;
        --secondary-color: #7ed321;
        --background: linear-gradient(145deg, #f8f9fa 0%, #e9ecef 100%);
        --card-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
        --text-color: #2d3436;
        --section-bg: #f8f9fa;
        --card-bg: white;
    }

    [data-theme="dark"] {
        --primary-color: #6aa8ff;
        --secondary-color: #9dff5b;
        --background: linear-gradient(145deg, #2d2f33 0%, #1a1c20 100%);
        --card-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
        --text-color: #f8f9fa;
        --section-bg: #2d2d2d;
        --card-bg: #1e1e1e;
    }

    .container {
        width: 680px;
        padding: 2rem;
        background: var(--card-bg);
        border-radius: 1.5rem;
        box-shadow: var(--card-shadow);
        font-family: 'Segoe UI', system-ui;
        color: var(--text-color);
        margin: 2rem auto;
    }

    .header {
        display: flex;
        align-items: center;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 2px solid #eee;
    }

    .badge {
        padding: 0.4rem 1rem;
        border-radius: 2rem;
        font-weight: 600;
        margin-right: 1rem;
    }

    .bind-badge {
        background: #e3f2fd;
        color: #1976d2;
    }

    .switch-badge {
        background: #f0f4c3;
        color: #afb42b;
    }

    .delete-badge {
        background: #ffcdd2;
        color: #d32f2f;
    }

    .content-section {
        margin: 1.5rem 0;
        padding: 1.5rem;
        background: var(--section-bg);
        border-radius: 1rem;
    }

    .id-list {
        font-family: 'Fira Code', monospace;
        padding: 1rem;
        background: var(--card-bg);
        border-radius: 0.8rem;
        box-shadow: inset 0 0 0 1px #eee;
    }

    .instruction-list {
        margin-top: 2rem;
        padding-top: 1.5rem;
        border-top: 2px dashed #eee;
    }

    .instruction-item {
        display: flex;
        align-items: center;
        padding: 0.8rem;
        margin: 0.5rem 0;
        background: var(--section-bg);
        border-radius: 0.6rem;
        transition: transform 0.2s;
    }

    .instruction-item:hover {
        transform: translateX(8px);
        background: var(--primary-color);
        color: white;
    }

    .timestamp {
        text-align: right;
        color: #95a5a6;
        font-size: 0.9rem;
        margin-top: 1.5rem;
    }
</style>

<body>
    <div class="container">
        <div class="header">
            <div class="badge {{type === '绑定' ? 'bind-badge' : type === '切换' ? 'switch-badge' : 'delete-badge'}}">
                {{type}}操作
            </div>
            <h2>{{wzryId}}</h2>
        </div>

        {{if idList}}
        <div class="content-section">
            <h3>当前账号列表</h3>
            <pre class="id-list">{{idList}}</pre>
        </div>
        {{/if}}

        {{if functionList.length}}
        <div class="instruction-list">
            <div class="instruction-item">
                <span>▶</span>&nbsp;&nbsp;【#王者帮助】查看全部功能
            </div>
            {{each functionList item}}
            <div class="instruction-item">
                <span>▶</span>&nbsp;&nbsp;{{item}}
            </div>
            {{/each}}
        </div>
        {{/if}}

        <div class="timestamp">
            操作时间：{{timestamp}}
        </div>
    </div>

    <script>
        // 随机选择主题
        const themes = ['light', 'dark'];
        const randomTheme = themes[Math.floor(Math.random() * themes.length)];
        document.documentElement.dataset.theme = randomTheme;
    </script>
</body>